<template>
  <el-row>
    <el-col :span="24" class="bc">
      <div class="bCenter">
        <el-tabs type="border-card" class="nav-bc">
          <el-tab-pane label="修改用户">
            <div class="grid-content bg-purple-light">
              <div class="bcc">
                <el-form
                    :label-position="labelPosition"
                    label-width="80px"
                    :model="user"
                >
                  <el-form-item label="用户名">
                    <el-input v-model="user.username"></el-input>
                  </el-form-item>
                  <el-form-item label="密码">
                    <el-input v-model="user.password"></el-input>
                  </el-form-item>
                  <el-form-item label="目标院校">
                    <el-input v-model="user.tschool"></el-input>
                  </el-form-item>
                  <el-form-item label="邮箱">
                    <el-input v-model="user.email"></el-input>
                  </el-form-item>
                  <el-form-item label="qq号码">
                    <el-input v-model="user.qq"></el-input>
                  </el-form-item>
                  <el-form-item label="手机号码">
                    <el-input v-model="user.telphone"></el-input>
                  </el-form-item>
                  <el-form-item label="性别">
                    <el-radio-group v-model="user.sex">
                      <el-radio label="男"></el-radio>
                      <el-radio label="女"></el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="submitForm">修改</el-button>
                    <el-button type="primary" @click="cancel">取消</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-col>
  </el-row>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { useCookies } from '@vueuse/integrations/useCookies';
import axios from 'axios';
import { ElRow, ElCol, ElTabs, ElTabPane, ElForm, ElFormItem, ElInput, ElButton, ElRadioGroup, ElRadio, ElMessage } from 'element-plus';

const { get } = useCookies(['uid']);
const user = ref({
  id: '',
  username: '',
  password: '',
  tschool: '',
  email: '',
  qq: '',
  telphone: '',
  sex: '男',
  utype: ''
});
const labelPosition = ref('right');
const cancel = () => {
  // 如果需要触发父组件事件，这里应该在父组件监听该事件
  console.log('取消操作');
};
const submitForm = async () => {
  const sbj = {
    operate: 'update',
    userinfo: { ...user.value }
  };
  try {
    const result = await axios.post('/ky/user/doEdit', sbj);
    if (result.data.message) {
      ElMessage.success(result.data.message);
    }
  } catch (error) {
    console.error('修改用户出错:', error);
  }
};
onMounted(() => {
  const userId = get('uid');
  if (userId) {
    axios.get(`/ky/user/getOne?id=${userId}`).then((result) => {
      user.value = result.data.data;
    }).catch((error) => {
      console.error('获取用户信息出错:', error);
    });
  }
});
</script>



<style>
.bc {
  line-height: 40px;
  text-align: left;
  padding-left: 50px;
  padding-right: 50px;
}
.bcc {
  margin-left: 250px;
  margin-top: 30px;
  width: 500px;
}
.nav-bc {
  background-color: #eeeeee;
}
</style>